<!-- 滚动条demo -->
<template>
  <div class="container">
    <el-scrollbar
    ref="scrollbar"
      wrap-class="list"
      wrap-style="color: red;"
      view-style="font-weight: bold;"
      view-class="view-box"
      :native="native"
    >
      <div v-for="value in 20" :key="value">{{value}}</div>
    </el-scrollbar>
    <button @click="showTop">asd</button>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      num: 50,
      native:false,
      data: [1, 2, 3, 4, 5],
    };
  },
  computed: {
  },
  watch: {
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
        this.listenerScroll();
    },
    listenerScroll(){
        let div = this.$refs.scrollbar.$el;
        div.addEventListener('scroll', this.handleScroll,true);
    },
    destroyed(){
        let div = this.$refs.scrollbar.$el;
        div.addEventListener('scroll', this.handleScroll,true);
    },
    handleScroll(){
        console.log(this.$refs.scrollbar.native);
    },
    showTop(){
        this.num++;
        var div = this.$refs.scrollbar;
        console.log(div);
        this.native = true;

    },
    getTop(){
        this.scrollTop = this.$refs.scrollbar.$data.moveY;
    }
  }
};
</script>
<style lang="scss">
.container {
  width: 500px;
  height: 200px;
  overflow: hidden;
  background: #fff;
  margin: 0 auto;
  .list {
    max-height: 150px;
  }
}
</style>
